<template>
	<div class="content">
			<div class="title">
				健康自诊
				<a href="javascript:;" class="back"  @click="go"></a>
			</div>
			<div class="f1">
				<div class="sex">
					<img src="/static/img/find/male.jpg" class="img"/>
					<img src="/static/img/find/female.jpg" class="img"/>
				</div>
				<div class="person" id="person2">
					<div class="font face">
						<img src="/static/img/find/male_front.png" class="img"/>
					</div>
					<div class="back face">
						<img src="/static/img/find/male_back.png" class="img"/>
					</div>
				</div>
				<div class="person hide" id="person1">
					<div class="font face">
						<img src="/static/img/find/female_front.png" class="img"/>
					</div>
					<div class="back face">
						<img src="/static/img/find/female_back.png" class="img"/>
					</div>
				</div>
				<div class="roate">
					<i class="icon_roate"></i>
					<div class="direction">正面</div>
				</div>
			</div>
		</div>
</template>

<script>
	export default {
	  data () {
	    return {
	    }
	  },
	  created:function(){
	  	$(function(){
				$(".sex .img").click(function(){
					var index = $(".sex .img").index(this);
					if(index==1){
						$("#person2").addClass("hide");
						$("#person1").removeClass("hide")
					}else if(index==0){
						$("#person1").addClass("hide");
						$("#person2").removeClass("hide")
					}
				})
				$(".roate").click(function(){
					$(".direction").text()==="反面"?$(".direction").text("正面"):$(".direction").text("反面")
					$(".person").toggleClass("zhuan")
				})
			})
	  },
	  methods:{
	  	go:function(){
	  		this.$router.push(`/find`);
	  	}
	  }
	  
	}
</script>

<style scoped>
	.content .title {
  text-align: center;
  height: 0.44rem;
  line-height: 0.44rem;
  padding: 0 0.15rem;
  font-size: 0.17rem;
  background: #fff;
  border-bottom: 1px solid #ebecf1;
  position: relative; }
  .content .title .back {
    background: url(/static/img/find/back.png) no-repeat;
    background-size: 100%;
    position: absolute;
    display: block;
    width: 0.2rem;
    height: 0.2rem;
    left: 0.15rem;
    top: 0.14rem; }
.content .f1 {
  position: relative;
  overflow: hidden; }
  .content .f1 .sex {
    position: absolute;
    left: 0.1rem;
    top: 0.4rem;
    z-index: 9; }
    .content .f1 .sex .img {
      width: 0.41rem;
      height: 0.41rem;
      display: block;
      margin-top: 0.11rem; }
  .content .f1 .person {
    text-align: center;
    margin-top: 0.65rem;
    position: relative;
    transition: all .5s;
    transform-style: preserve-3d;
    height: 5rem; }
    .content .f1 .person .face {
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 0.7rem; }
    .content .f1 .person .back {
      transform: rotateY(-180deg); }
    .content .f1 .person .img {
      width: 100%;
      display: block;
      background: #fff; }
  .content .f1 .hide {
    display: none; }
  .content .f1 .zhuan {
    transform: rotateY(180deg); }
  .content .f1 .roate {
    position: absolute;
    right: 0.15rem;
    bottom: 0.7rem; }
    .content .f1 .roate .icon_roate {
      background: url(/static/img/find/roate.png) no-repeat;
      width: 0.25rem;
      height: 0.19rem;
      display: block;
      background-size: 100%; }
    .content .f1 .roate .direction {
      font-size: 0.13rem;
      color: #83889a;
      margin-top: 0.05rem; }

</style>